import React from 'react';
class TestJs extends React.Component{
    constructor(props){
        super(props)
        this.state={
            num:0,
            date:new Date()
        }
    }
    changNumVal(){
        let newNum =++this.state.num
        this.setState({
            num: newNum
        })
    }
    componentDidMount(){
        //组件渲染之后调用，只调用一次。
        this.timer = setInterval(()=>{
            this.setState({
                date:new Date()
            })
        },1000)
    }
    componentWillUnmount(){
        //组件将要卸载时调用，一些事件监听和定时器需要在此时清除。
        clearInterval(this.timer)
    }
    componentDidUpdate(currentProps,currentState){
        //组件初始化时不调用，组件更新完成后调用，此时可以获取dom节点
       // console.log(currentState)
    }
    render(){
        const tudoList = ['姓名：','手机号：','年龄'];
        const {userName,userPhone,userAge} = this.props;
        
        return <div>
            <p>{this.state.date.toLocaleTimeString()}</p>
            <ul>
                {
                    tudoList.map((item,index)=>
                        <li key={index}>{item}
                            {index===0?userName:'未设置用户名'}
                            {index===1?userPhone:'未设置手机号：'}
                            {index===2?userAge:'未设置年龄'}
                        </li>
                    )
                }
            </ul>
            <button onClick={()=>{this.changNumVal()}}>点击数量递增：{this.state.num}</button>
        </div>
    }
}   
export default TestJs;